<template>
  <div class="icon-select">
    <img @click="handleSelectIcon" :src="props.icon ? props.icon : defaultIcon" alt="icon" />
    <div v-show="props.visible" class="icon-list">
      <div class="icon-item" v-for="item in iconList" :key="item.name">
        <div class="icon-name">{{ item.name }}</div>
        <div class="icons">
          <img @click="handleCheckIcon(icon)" class="icon" v-for="icon in item.icons" :src="icon" />
        </div>
      </div>
      <div class="icon-mask" @click="emit('update:visible', false)"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getIcons } from '@renderer/utils'

const props = defineProps({
  icon: {
    type: String
  },
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible', 'update:icon'])

const iconMap = getIcons()

// 重构图标列表，使用导入的模块
const iconList = [iconMap['yuexiao'], iconMap['kanteleila']]

const defaultIcon = iconMap['yuexiao'].icons[0]

const handleSelectIcon = () => {
  emit('update:visible', !props.visible)
}

const handleCheckIcon = (icon: string) => {
  emit('update:icon', icon)
  emit('update:visible', false)
}
</script>

<style scoped lang="scss">
.icon-select {
  width: 100%;
  height: 100%;
  position: relative;

  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }

  .icon-list {
    padding: 10px;
    position: absolute;
    z-index: 100;
    background-color: var(--xz-secondbg);
    border-radius: var(--xz-main-radius);
    min-width: 350px;
    max-height: 300px;
    overflow: auto;
    left: 0;

    .icon-item {
      position: relative;
    }

    .icon-mask {
      position: fixed;
      width: 100vw;
      height: 100vh;
      top: 0;
      left: 0;
      z-index: -99;
    }

    .icon-name {
      font-size: 14px;
      margin-bottom: 10px;
      color: var(--xz-lighttext);
      font-weight: bold;
    }

    .icons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 10px;

      .icon {
        border: 1px solid transparent;
        transition: all 0.3s ease-out;

        &:hover {
          border-color: var(--xz-theme);
          scale: 1.08;
          filter: brightness(1.1);
        }
      }
    }
  }
}
</style>
